<template>
  <div>
    <el-form :model="netWorks" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="padding: 10px">
      <el-form-item :label="$t('TabNetwork_network')" prop="name">
<!--        网络模式-->
        <el-select v-model="netWorks.Network" :placeholder="$t('TabNetwork_network')" style="width: 100%">
          <el-option :label="item.Name" :value="item.Name" v-for="item in networkList" :key="item.Id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('TabNetwork_Hostname')" prop="Hostname">
<!--        主机名-->
        <el-input v-model="netWorks.Hostname" :placeholder="$t('TabNetwork_Hostname')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('TabNetwork_Domainname')" prop="DomainName">
<!--        域名-->
        <el-input v-model="netWorks.DomainName" :placeholder="$t('TabNetwork_Domainname')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('TabNetwork_MacAddress')" prop="MacAddress">
<!--        MAC地址-->
        <el-input v-model="netWorks.MacAddress" :placeholder="$t('TabNetwork_MacAddress')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('TabNetwork_IPv4Address')" prop="IPv4Address">
<!--        ipv4地址-->
        <el-input v-model="netWorks.IPv4Address" :placeholder="$t('TabNetwork_IPv4Address')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('TabNetwork_IPv6Address')" prop="IPv6Address">
<!--        ipv6地址-->
        <el-input v-model="netWorks.IPv6Address" :placeholder="$t('TabNetwork_IPv6Address')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('TabNetwork_MasterDNSServer')" prop="PrimaryDNSServer">
<!--        主dns服务器-->
        <el-input v-model="netWorks.PrimaryDNSServer" :placeholder="$t('TabNetwork_MasterDNSServer')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('TabNetwork_SlaveDNSSever')" prop="SecondaryDNSServer">
<!--        副dns服务器-->
        <el-input v-model="netWorks.SecondaryDNSServer" :placeholder="$t('TabNetwork_SlaveDNSSever')"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import post from '@/utils/post'
export default {
  data () {
    return {
      netWorks: {
        Network: 'bridge',
        Hostname: '',
        DomainName: '',
        MacAddress: '',
        IPv4Address: '',
        IPv6Address: '',
        PrimaryDNSServer: '',
        SecondaryDNSServer: ''
      }, // netwrok数据
      networkList: [] // 请求的网络列表
    }
  },
  watch: {
    // 监听vuex中是isupload是否变化为true，true则上传本组件的数据。
    '$store.state.isUpload': function () {
      if (this.$store.state.isUpload) {
        this.$store.commit('changeCrateData', ['netWorks', this.netWorks])
      }
    }
  },
  mounted () {
    const docker = 'curl --unix-socket /var/run/docker.sock -s "http:/v1.40/networks"'
    post({ docker }, (res) => {
      this.networkList = res
    }, this)
  }
}
</script>
